<template>
  <div class="music-tab">
      <router-link
        v-for="one in tabList"
        :key="one.path"
        :to="one.path"
        class="router-link-tab"
        active-class="router-link-active-tab"
    >
        <span>{{one.title}}</span>
    </router-link>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
interface TabProp {
    path: string;
    title: string;
}
export default defineComponent({
    setup () {
        const tabList = ref<TabProp[]>([
            {
                path: '/recommend',
                title: '首页'
            },
            {
               path: '/singer',
                title: '歌手'
            },
            {
                path: '/top-list',
                title: '排行'
            },
            {
               path: '/search',
                title: '搜索'
            }
        ])
        return {
            tabList
        }
    }
})
</script>

<style lang="scss">
.music-tab {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 5px 0;
    .router-link-tab {
        padding: 7px 0;
         border-bottom: 3px solid transparent;
        &.router-link-active-tab {
            border-color: $color-theme;
            color: $color-theme;
        }
    }
}
</style>
